<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WebSocket Example</title>
</head>
<body>
登录用户ID：<input type="text" id="sendUserId"/></br>
接受用户ID：<input type="text" id="receivedUserId"/></br>
发送消息内容：<input type="text" id="messageInput"/></br>
接受消息内容：<input type="text" id="messageReceive"/></br>
<button onclick="sendMessage()">Send</button>

<script>
    var socket = new WebSocket("ws://localhost:8080/websocket/aaa");
    var roomId = "123456";
    // 随机产出六位数字
    var sendUserId = Math.floor(Math.random() * 1000000);

    document.getElementById("sendUserId").value = sendUserId;
    var messageReceive = document.getElementById("messageReceive");


    socket.onopen = function (event) {
        console.log("WebSocket is open now.");
        let loginInfo = {
            msgType: 2, //登录消息
            sendUserId: sendUserId,
            bizType: 1, //业务类型
            bizOptModule: 1, //业务模块
            roomId: roomId,
            msgBody: {},
        };
        socket.send(JSON.stringify(loginInfo));
    };

    socket.onmessage = function (event) {
        var message = event.data;
        console.log("Received message: " + message);
        messageReceive.value = message;
    };

    socket.onclose = function (event) {
        console.log("WebSocket is closed now.");
    };

    function sendMessage() {
        var message = document.getElementById("messageInput").value;
        var receivedUserId = document.getElementById("receivedUserId").value;
        let operateInfo = {
            msgType: 100, //业务消息
            sendUserId: sendUserId,
            bizType: 1, //业务类型
            bizOptModule: 1, //业务模块
            roomId: roomId,
            receivedUserId: receivedUserId,
            msgBody: {
                operateType: 1, //操作类型：禁言
                operateContent: "1",
            },
        };
        socket.send(JSON.stringify(operateInfo));
    }

    setInterval(() => {
        socket.send("ping");
    }, 30000);
</script>
</body>
</html>